import React, { useEffect } from 'react';
import { StyleSheet, Image, Animated, Easing } from 'react-native';
import Touchable from '@/components/Touchable';
import Icon from '@/assets/iconfont/Icon';
import { connect } from 'react-redux';
import Progress from './progress';

const mapStateToProps = ({ player }) => {
    return {
        thumbnailUrl: player.thumbnailUrl,
        playState: player.playState,
    };
};

const connector = connect(mapStateToProps);


function Play(props) {
    const { playState, onPress, thumbnailUrl } = props;
    let anim = new Animated.Value(0);
    let timing = Animated.loop(
        Animated.timing(anim, {
            toValue: 1,
            duration: 10000,
            easing: Easing.linear,
            useNativeDriver: true,
        }),
        { iterations: -1 },
    );
    let rotate = anim.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg'],
    });
    useEffect(() => {

        if (playState === 'playing') {
            timing.start();
        } else if (playState === 'paused') {
            timing.stop();
        }
    }, [playState])

    const handlePress = () => {
        if (thumbnailUrl && onPress) {
            onPress();
        }
    }
    return (
        <Touchable style={styles.play} onPress={handlePress}>
            <Progress>
                <Animated.View style={{ transform: [{ rotate: rotate }] }}>
                    {thumbnailUrl ? (
                        <Image source={{ uri: thumbnailUrl }} style={styles.image} />
                    ) : (
                        <Icon name="icon-bofang3" color="#ededed" size={40} />
                    )}
                </Animated.View>
            </Progress>
        </Touchable>
    );
}

const styles = StyleSheet.create({
    play: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    image: {
        width: 42,
        height: 42,
        borderRadius: 21,
    },
});

export default connector(Play);
